/*
 * Description: 可拖拽元素
 * Author: wangyifei
 * DateCreated: 2024-04-12 10:27
 */

import { type PropsWithChildren } from 'react';
import { useDraggable } from '@dnd-kit/core';
import { CSS } from '@dnd-kit/utilities';
import { DraggableStyle } from '../style';

const Draggable = (props: PropsWithChildren<{ id?: string | number }>) => {
	const { id = 'draggable' } = props;

	const { attributes, listeners, setNodeRef, transform } = useDraggable({ id });
	const style = transform
		? {
				// transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
				transform: CSS.Translate.toString({
					x: transform.x,
					y: transform.y,
					scaleX: transform.x,
					scaleY: transform.y
				})
		  }
		: undefined;

	return (
		<div ref={setNodeRef} className="draggable-button" style={style} {...listeners} {...attributes}>
			<DraggableStyle>{props.children}</DraggableStyle>
		</div>
	);
};

export default Draggable;
